﻿<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查看全部</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">
    <style type="text/css" media="screen">
        body { margin: 0; }
        #app { display: none; }
        .color-red { color: red; }
        .product-list > .cover {
            display: block;
            max-width: 100%;
            margin: 0 auto;
        }
        .product-list > .title {
            height: 40px;
            line-height: 40px;
            overflow: hidden;
            text-align: center;
            margin: 0;
            font-size: 14px;
            font-weight: normal;
            border-bottom: 1px solid #f7f5f5;
        }
        .product-list > .container {
            
        }
        .product-list .product {
            display: block;
            color: #333;
            border-bottom: 1px solid #f7f5f5;
            padding: 10px;
            position: relative;
        }
        .product-list .product:after {
            content: '';
            display: block;
            clear: both;
        }
        .product-list .product > .cover {
            width: 25%;
            float: left;
        }
        .product-list .product > .cover > img {
            max-width: 100%;
            max-height: 80px;
            display: block;
            margin: auto;
        }
        .product-list .product > .info {
            width: 75%;
            padding-left: 5px;
            float: left;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .product-list .product > .info > h5,
        .product-list .product > .info > p {
            margin: 0;
            text-overflow:ellipsis;
            overflow: hidden;
        }
        .product-list .product > .info > .name {
            font-size: 16px;
            height: 22px;
            line-height: 22px;
            font-weight: normal;
        }
        .product-list .product > .info > .desc {
            font-size: 15px;
            height: 22px;
            line-height: 22px;
            color: #999;
        }
        .product-list .product > .info > .price-market {
            font-size: 12px;
            height: 18px;
            line-height: 18px;
            text-decoration: line-through;
            color: #ccc;
        }
        .product-list .product > .info > .price-mall {
            font-size: 14px;
            height: 20px;
            line-height: 20px;
            color: red;
        }
        .product-list .product > .info > .price-mall.md {
            font-size: 18px;
            height: 38px;
            line-height: 38px;
        }
        .product-list .product > .info > .price-mall span{
            font-size: 12px;
            color: #ccc;
            margin-left: 5px;
        }
        .product-list .product > .btn {
            position: absolute;
            right: 15px;
            bottom: 15px;
            width: 35px;
            height: 35px;
            z-index: 1;
        }
        .product-list .product > .btn > img {
            width: 100%;
            height: 100%;
            display: block;
        }
        .product-list .statusspan {
            display: block;
            height: 35px;
            line-height: 35px;
            text-align: center;
            color: #999;
        }
        .suspension-operation {
            position: fixed;
            right: 1rem;
            bottom: 1rem;
            z-index: 9999;
        }

        .suspension-operation > a {
            display: block;
            width: 2.5rem;
            height: 2.5rem;
            line-height: 2.5rem;
            font-size: 1.5rem;
            text-align: center;
            background-color: rgba(0, 0, 0, .3);
            color: #fff;
            border-radius: .2rem;
            margin-top: .5rem;
            box-shadow: 0 0 5px #999;
        }
        .itemInsertFrames {
            -webkit-animation: itemInsertFrames 0.4s;
            animation: itemInsertFrames 0.4s;
        }
        @-webkit-keyframes itemInsertFrames {
            from {
                -webkit-transform: translate(0, 20px);
                transform: translate(0, 20px);
                opacity: 0
            }
            to {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
                opacity: 1
            }
        }
        @keyframes itemInsertFrames {
            from {
                -webkit-transform: translate(0, 20px);
                transform: translate(0, 20px);
                opacity: 0
            }
            to {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
                opacity: 1
            }
        }
    </style>
</head>
<body>
    <div id="app" ng-app="myApp" ng-controller="myCtrl">
        <div class="product-list">
            <img ng-if="listData.cover" class="cover" ng-src="{{listData.cover}}">
            <h3 class="title" ng-bind-html="listData.titleHtml"></h3>
            <div class="container" infinite-scroll='next()' infinite-scroll-disabled='listData.loading' infinite-scroll-distance='1'>
                <a class="product itemInsertFrames" href="{{product.Url}}" ng-click="itemClick(product)" ng-repeat="product in listData.list">
                    <div class="cover">
                        <img ng-src="{{product.PhotoUrl}}" ng-alt="{{product.Title}}">
                    </div>
                    <div class="info" ng-if="type==='hot'">
                        <h5 class="name">{{product.Title}}</h5>
                        <p class="desc">{{product.Description}}</p>
                        <p class="price-mall md">￥{{product.Param2}}<span>销量：{{product.SellCount}}</span></p>
                    </div>
                    <div class="info" ng-if="type==='newest'">
                        <h5 class="name">{{product.Title}}</h5>
                        <p class="desc">{{product.Description}}</p>
                        <p class="price-market">市场价：￥{{product.Param3}}</p>
                        <p class="price-mall">商城价：￥{{product.Param2}}</p>
                    </div>
                    <div class="btn">
                        <img src="images/kind1701/slgsbtn.png">
                    </div>
                </a>
                <span class="statusspan itemInsertFrames" ng-if="listData.loadingAll&&listData.loadingAllText">{{listData.loadingAllText}}</span>
                <span class="statusspan itemInsertFrames" ng-if="!listData.loadingAll&&listData.loadText">{{listData.loadText}}</span>
            </div>
        </div>
        <div class="suspension-operation">
            <a href="https://gdtvshop.weixinmvp.com/Wap/Shop/">
                <i class="fa fa-home"></i>
            </a>
            <a href="javascript:void(0);" ng-click="ontop()" ng-show="gotopShow">
                <i class="fa fa-arrow-up"></i>
            </a>
        </div>
    </div>
    <script type='text/javascript' src='../lib/jquery/jquery-1.10.2.min.js'></script>
    <script type="text/javascript" src="../../assets/plugins/angular/angular-1.6.1.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.bootcss.com/ngInfiniteScroll/1.3.0/ng-infinite-scroll.js" type="text/javascript"></script>
    <script type="text/javascript">
        
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "//hm.baidu.com/hm.js?290e7b3ea81e18569ee34cb9d775cb90";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();

    </script>
    <script src="http://yys.qingcat.com/code/js/zlan_io.js?appid=weixinmvp_cms "></script>

    <script type="text/javascript">
        var App = angular.module('myApp', ['infinite-scroll']);
        App.value('type', '<%=Request["type"]%>');
        App.value('code', '<%=Request["code"]%>');
        App.controller('myCtrl', function($scope, $element, $sce, $deImgSrc, executeCommand, type, code) {


            var hotListData = {
                title: '小V爆款',
                titleHtml: $sce.trustAsHtml('<span class="color-red">小V</span>爆款'),
                cover: "images/MoreList/hot.jpg",
                PositionCode: 'HOME_XV_TJ',
                PageSize: 9,
                PageIndex: 1,
                loading: false,
                loadText: '努力加载中...',
                loadingAllText: '',
                list: []
            };

            var newestListData = {
                title: '小V上新',
                titleHtml: $sce.trustAsHtml('<span class="color-red">小V</span>上新'),
                cover: "images/MoreList/newest.jpg",
                PositionCode: 'HOME_XV_NEW',
                PageSize: 6,
                PageIndex: 1,
                loading: false,
                loadingAll: false,
                loadingText: '努力加载中...',
                loadingAllText: '',
                list: []
            };


            $scope.type = type;
            if ($scope.type === 'hot') {
                $scope.type = type;
                $scope.listData = hotListData;
            } else if ($scope.type === 'newest') {
                $scope.listData = newestListData;
            } else {
                $scope.type = 'hot';
                $scope.listData = hotListData;
            }

            if (code) {
                $scope.listData.PositionCode = code;
            }


            var path = 'morelist|path|' + $scope.type + '|' + $scope.listData.PositionCode;
            _hmt.push(['_trackEvent', path, 'enter', 'morelist|' + $scope.type]);
            _hmt.push(['_trackEvent', 'page', 'view', 'morelist|' + $scope.type]);

            document.title = $scope.listData.title;
            $element.fadeIn(400);

            $scope.next = function () {
                if ($scope.listData.loadingAll) return;
                if ($scope.listData.loading) return;
                $scope.listData.PageIndex += 1;
                $scope.listData.loading = true;
                executeCommand('Pub.LoadAdProduct', {
                    PositionCode: $scope.listData.PositionCode,
                    PageSize: $scope.listData.PageSize,
                    PageIndex: $scope.listData.PageIndex,
                }, function (result) {
                    var list = $deImgSrc.hashMapSrc(result.Result.List, false, 'PhotoUrl', null, 'http://gdtvimg.weixinmvp.com');
                    $scope.listData.list.push.apply($scope.listData.list, list);
                    $scope.listData.loading = false;
                    if (list.length < $scope.listData.PageSize) {
                        $scope.listData.loadingAll = true;
                    }
                });
            };
            $scope.itemClick = function(product){
                ZlanIOClick("view", "morelist", product.Title);
            }

            $scope.ontop = function(scrollTop) {
                var $screen = $('html,body');
                scrollTop = scrollTop || 0;
                $screen.each(function(index, el) {
                    var $el = $(el);
                    if($el.scrollTop() !== scrollTop) {
                        $el.animate({
                            scrollTop: scrollTop
                        }, 600);
                    }
                });
            };

            $scope.gotopShow = false;
            $(window).scroll(function(){
                if ($scope.gotopShow === false && document.body.scrollTop > 300) {
                    $scope.gotopShow = true;
                    $scope.$apply();
                } else if ($scope.gotopShow === true && document.body.scrollTop <= 300) {
                    $scope.gotopShow = false;
                    $scope.$apply();
                }
            }).scroll();


        });
        App.service('$deImgSrc', function () {
            var self = this;

            var getSrc = function (imgData) {
                if (!imgData) { return '' }
                var host = imgData.ServerUrl || '';
                var path = imgData.FilePath || '';
                return host + path;
            };

            var getSrcThumb = function (imgData) {
                if (!imgData) { return '' }
                var host = imgData.ServerUrl || '';
                var path = imgData.FilePath || '';
                var ext = imgData.FileExt || '';
                return host + path + '.thumb.' + ext;
            };

            self.deImgJson = function (code) {
                try {
                    return JSON.parse(code);
                } catch (err) {
                    return [];
                }
            };

            self.getSrc = function (code, ishumb, host) {
                var imgArray = self.deImgJson(code);
                var imgData = imgArray[0];
                if (!imgData) { return '' }
                if (host) { imgData.ServerUrl = host; }
                if (ishumb) { return getSrc(imgData); }
                return getSrcThumb(imgData);
            };

            self.getSrcArray = function (code, ishumb, host) {
                return self.deImgJson(code).map(function (imgData) {
                    return self.getSrc(imgData, ishumb, host);
                });
            };

            self.hashMapSrc = function (hash, ishumb, hashKey, mapKey, host) {
                if (!hashKey) { return hash; }
                if (!mapKey) { mapKey = hashKey; }
                hash = hash.map(function(itemData) {
                    itemData[mapKey] = self.getSrc(itemData[hashKey], ishumb, host);
                    return itemData;
                });
                return hash;
            };

        });
        App.factory('executeCommand', ['$http', function($http) {
            return function(key, param, callback) {
                $http({
                    url: '/Interface/ajax/CommandService.aspx?key=' + key,
                    method: 'POST',
                    params: {
                        param: param
                    }
                }).then(function successCallback(response) {
                    if (response.data.ErrorCode == '0000') {
                        callback(response.data);
                    }
                }, function errorCallback(response) {})
            };
        }])

    </script>
</body>
</html>